import React, { Component } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Col, Row, Typography, Icon } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Column } from '@ant-design/charts';
import styles from './Home.less';
import { getMomentNum, getNumByCollege, getOrderNum, getRegisterNum } from '@/api/index';

export default class Home extends Component {
  state = {
    todayMomentNum: 0,
    totalMomentNum: 0,
    todayOrderNum: 0,
    totalOrderNum: 0,
    todayRegisterNum: 0,
    totalRegisterNum: 0,
    chartData: '',
  };
  componentDidMount() {
    getMomentNum().then((res) => {
      if (res.code === 200) {
        this.setState({ todayMomentNum: res.data.todayCount, totalMomentNum: res.data.totalCount });
      }
    });
    getOrderNum().then((res) => {
      if (res.code === 200) {
        this.setState({ todayOrderNum: res.data.todayCount, totalOrderNum: res.data.totalCount });
      }
    });
    getRegisterNum().then((res) => {
      if (res.code === 200) {
        this.setState({
          todayRegisterNum: res.data.todayCount,
          totalRegisterNum: res.data.totalCount,
        });
      }
    });
    getNumByCollege().then((res) => {
      if (res.code === 200) {
        this.setState({ chartData: res.data });
      }
    });
  }

  render() {
    const CollectChart = () => {
      const data = [...this.state.chartData];
      const config = {
        data,
        xField: 'type',
        yField: 'num',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle',
          // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: '学院',
          },
          num: {
            alias: '数量',
          },
        },
      };
      return <Column {...config} />;
    };
    return (
      <div>
        <PageContainer>
          <div className="site-card-wrapper">
            <Row gutter={16}>
              <Col span={8}>
                <Card>
                  <div className={styles.card}>
                    <p className={styles.card_title}>
                      今日发布量
                      <QuestionCircleOutlined />
                    </p>
                    <p className={styles.card_num}>{this.state.todayMomentNum}条校友圈</p>
                    <p className={styles.card_compare}>总发布量：{this.state.totalMomentNum}条</p>
                  </div>
                </Card>
              </Col>
              <Col span={8}>
                <Card>
                  <div className={styles.card}>
                    <p className={styles.card_title}>
                      今日交易量
                      <QuestionCircleOutlined />
                    </p>
                    <p className={styles.card_num}>{this.state.todayOrderNum}笔</p>
                    <p className={styles.card_compare}>总交易量：{this.state.totalOrderNum}笔</p>
                  </div>
                </Card>
              </Col>
              <Col span={8}>
                <Card>
                  <div className={styles.card}>
                    <p className={styles.card_title}>
                      今日注册人数
                      <QuestionCircleOutlined />
                    </p>
                    <p className={styles.card_num}>{this.state.todayRegisterNum}人</p>
                    <p className={styles.card_compare}>
                      总注册人数：{this.state.totalRegisterNum}人
                    </p>
                  </div>
                </Card>
              </Col>
            </Row>
          </div>
          <div className={styles.chart}>
            <CollectChart />
          </div>
        </PageContainer>
      </div>
    );
  }
}
